<template>
	<view>
		<view class="add-more-main">
			<view class="li-title">{{liTitle}}</view>
			<view class="">
				<view class="add-more-body">
					<view class="pers-list" v-for='(it,i) in users' :key='i'>
						<view class="pers-pic">
							<view class="">
								<u-avatar :text="it.userName.slice(1)" :fontSize="it.userName.length > 2?12:15" 
									shape="square" size="35" bgColor="#0087FC">
								</u-avatar>
								<view class="pers-close" style="" @click="closeUser(it,i)" v-if="isEdit">
									<u-icon name="close" color="#ffffff" size="18rpx" customStyle="line-height: 20rpx;" bold>
									</u-icon>
								</view>
							</view>
							<view v-if="type=='审批人'" class="pers-icon">
								<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
							</view>
							<view v-else-if="type=='抄送人'||'任务管家参与人'&&(isEdit||users.length-1>i)" class="pers-icon">
								<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
							</view>
						</view>
						<text class="pers-name">{{it.userName}}</text>
					</view>
					<view v-if="type=='审批人'|| '质检人'" class="pers-list plus-style"
						@click="gotoPage('/components/choose-user/choosePer?type='+type+'&chooseUsers='+JSON.stringify(users))">
						<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
						<view class="">
							<uni-text class="span-style" v-show="users.length==0">
								<span>*</span>
							</uni-text>
						</view> 
					</view>
					<view v-else-if="type=='抄送人'||'任务管家参与人'&&isEdit" class="card-plus-s plus-style"
						@click="gotoPage('/components/choose-user/choosePer?type='+type+'&chooseUsers='+JSON.stringify(users))">
						<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-button" v-if="isEdit">
			<view class="submit-block" @click="submit()">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'',
				liTitle: '',
				users: [],
				isEdit:false,
				isMust: false,
			}
		},
		onLoad(option) {
			this.type = option.type;
			this.isEdit = option.isEdit=='0'?false:true
			this.users = option.chooseUsers && JSON.parse(decodeURIComponent(option.chooseUsers))
			if (this.type == '任务管家参与人') {
				this.liTitle = this.users.length + '人参与'
				this.noticeTitle = '任务管家参与人'
			}else if(this.type == '任务管家审批人'){
				this.liTitle = this.users.length + '人审批'
				this.noticeTitle = '任务管家审批人'
			}else if(this.type == '审批人'){
				this.liTitle = this.users.length + '人依次审批'
				this.noticeTitle = '审批人'
			} else if (this.type == '抄送人') {
				this.liTitle = '抄送' + this.users.length + '人'
				this.noticeTitle = '抄送人'
			} else if (this.type == '质检人') {
				this.liTitle = '质检' + this.users.length + '人'
				this.noticeTitle = '质检人'
			}
			
			// 从流程插件中过来的
			if(option.isMust){
				this.isMust = option.isMust
				if(this.isMust == 'true') {
					this.liTitle = this.users.length + '人依次' + this.type.slice(0, this.type.length-1)
					this.noticeTitle = this.type
				} else {
					this.liTitle = this.type.slice(0, this.type.length-1) + this.users.length + '人'
					this.noticeTitle = this.type
				}
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.noticeTitle
			})
		},
		methods: {
			// 从新增页面获取的值
			setUsers(e) {
				this.users = e
				if (this.type == '审批人') {
					this.liTitle = this.users.length + '人依次审批'
				}
			},
			setCc(e) {
				this.users = e
				if (this.type == '审批人') {
					this.liTitle = '抄送' + this.users.length + '人'
				}
			},
			setZj(e) {
				this.users = e
				if (this.type == '质检人') {
					this.liTitle = '质检' + this.users.length + '人'
				}
			},
			setChooseUsers(e){
				this.users = e
				if (this.type == '任务管家参与人') {
					this.liTitle = this.users.length + '人参与'
				}
			},
			setChooseSpUsers(e){
				this.users = e
				if(this.type == '任务管家审批人'){
					this.liTitle = this.users.length + '人审批'
				}
			},
			closeUser(it, i) {
				this.users.forEach(its => {
					if (its.userId == it.userId) {
						this.users.splice(i, 1)
					}
				})
				if (this.type == '任务管家参与人') {
					this.liTitle = this.users.length + '人参与'
				}else if(this.type == '任务管家审批人' ){
					this.liTitle = this.users.length + '人审批'
				}else if(this.type == '审批人' ){
					this.liTitle = this.users.length + '人审批'
				}else if(this.type == '抄送人' ){
					this.liTitle = '抄送' + this.users.length + '人'
				}else if(this.type == '质检人' ){
					this.liTitle = '质检' + this.users.length + '人'
				}
			},
			submit(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.t = 'add-more'
				if (this.type == '任务管家参与人') {
					prevPage.$vm.setChooseUsers(this.users);
				}else if(this.type == '任务管家审批人'){
					prevPage.$vm.setChooseSpUsers(this.users);
				}else if(this.type == '审批人'){
					prevPage.$vm.setUsers(this.users);
				}else if(this.type == '抄送人'){
					prevPage.$vm.setCc(this.users);
				}else if(this.type == '质检人'){
					prevPage.$vm.setZj(this.users);
				}
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
		color: #333333;
	}

	.add-more-main {
		padding: 30rpx 20rpx;
	}

	.li-title {
		color: #a5a5a5;
		font-size: 30rpx;
	}

	.add-more-body {
		display: flex;
		flex-direction: row;
		justify-content: start;
		margin-top: 25rpx;
		padding: 0 28rpx;
		flex-wrap: wrap;
	}

	.pers-list {
		margin-right: 58rpx;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.pers-pic {
		height: 70rpx;
	}

	.pers-close {
		background-color: rgb(198, 199, 203);
		width: 18rpx;
		height: 18rpx;
		border-radius: 18rpx;
		padding: 5rpx;
		position: absolute;
		margin-top: -80rpx;
		margin-left: 55rpx;

	}

	.pers-icon {
		position: relative;
		top: -50rpx;
		left: 88rpx;
		width: 26rpx;
	}

	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
	}

	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		margin-bottom: 40rpx;
		position: relative;
		height: 45rpx;
		border-radius: 15rpx;
	}

	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;

	}
</style>
